<template>
	<div class="admadd">
		<div class="box">
			<p>轮播图</p>
			<el-form ref='form' :model='form' style='width: 40%;'>
				<el-form-item label='描述'>
					<el-input v-model='form.memo'></el-input>
				</el-form-item>
				<el-form-item label='热度'>
					<el-input v-model='form.hot'></el-input>
				</el-form-item>
				<el-form-item label='类型'>
					<el-input v-model='form.type'></el-input>
				</el-form-item>
				<el-form-item label='图片'>
					 <input type="file" ref='pic'/>
				</el-form-item>
				<el-form-item>
					<el-button size="mini" @click="but()">返回</el-button>
					<el-button size="mini" type="danger" @click="apppic()">上传</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default{
		name:'AdmAdd',
		data(){
			return{
				form:{
					memo:'购书中心首页头部轮播图',
					hot:1,
					type:1,
					pic:'',
				}
			}
		},
		methods:{
			//返回列表
			but(){
				this.$router.push('/adm/adm3')
			},
			apppic(){
				//this.$refs指向被ref属性绑定的标签元素
				//上传框的value属性是files，被上传的文件具体信息
				//this,$refs.pic.files：所上传的文件的完整数据
				// console.log(this.$refs.pic.files)
				let fs = this.$refs.pic.files	//获取的是图片完整数据
				console.log(fs[0])
				//判断是否有上传图片[有图片上传 且 图片是存在的]
				if(fs.length >0 && fs[0] !='' && this.form.memo!='' && this.form.hot!='' &&this.form.type!=''){
					//创建一个空的表单对象数据
					let fd = new FormData()
					//将需要打包的数据，append方式提交给对象
					fd.append('memo',this.form.memo)		//描述
					fd.append('hot',this.form.hot)		//热度
					fd.append('type',this.form.type)		//类型
					fd.append('pic',fs[0])				//图片
				
					//发起post请求
					/*
						请求地址		http://127.0.0.1:8090/api/hot/addHot
						提交的数据	fd
						表头配置		header:{'Content-Type' : 'multipart/form-data'}
					*/
				   this.axios.post('/api/adm/hot/addHot',fd,{
					   header:{'Content-Type' : 'multipart/form-data'}
				   }).then((res)=>{
					   if(res.data.code === 200){
						   //请求成功后，返回 查询页
						   this.$router.push('/adm/adm3')
					   }else{
						   alert(res.data.msg)	//msg失败之后的返回信息
					   }
				   }).catch((error)=>{
					   console.log(error)
				   })
				}
			}
		}
	}
</script>

<style scoped>
	.box button{
		cursor: pointer;
	}
	.box p:first-child{
		font-size: 30px;
		color:#00bfff ;
		font-weight: bold;
		padding-bottom: 20px;
		padding-right: 25px;
	}
	.box label{
		font-size: 20px;
		color: #00bfff;
	}
	.box p input[type='text']{
		width: 20%;
		line-height: 30px;
		border: none;
		border: 1.5px solid #00bfff;
		border-radius: 3px;
	}
	.box p{
		margin-top: 20px;
	}
	.box button{
		color: white;
		font-weight: bold;
		font-size: 17px;
		color: white;
		background: linear-gradient(to right,#00bfff,#00bfff);
		border: none;
		width: 60px;
		line-height: 25px;
		border-radius: 5px;
	}
	.box button:hover{
		color: #00bfff;
	}
	.box button:last-child{
		margin-left: 20px;
	}
</style>
